<template>
    <div class="container">
        <div class="navigation">
            <RouterLink to="/">首页</RouterLink>
            <RouterLink to="/Pindao">频道</RouterLink>
            <RouterLink to="/My">我的</RouterLink>
        </div>
    </div>

</template>

<script>

</script>

<style scoped>
.container {
    height: 10%;
    width: 100%;
    margin: 2px auto;
    background-color: #000000;
    padding: 1px;
    /* border-radius: 16px; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    /* position: fixed; */
    /* margin-bottom: 2px solid rgb(255, 255, 255); */
}


.navigation {
    height: 10%;
    display: flex;
    justify-content: space-around;
    /* background-color: #000000; */
    /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); */
}

.navigation a {
    text-decoration: none;
    color: #8f8d8d;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    display: block;
    padding: 10px;
    align-items: center;
}

.navigation a:hover,
.navigation a.router-link-exact-active {
    color: rgb(224, 113, 113);
}
</style>